/*
 * @Author: YuanSong
 * @Date: 2021-11-24 21:28:58
 * @Last Modified by: YuanSong
 * @Last Modified time: 2021-12-02 21:54:59
 */

import React from "react";

import showpassword from "@/assets/icons/showpassword.svg";

type IProps =  {
  onSearch:(T:string)=>void;
}
  
class Searchbar extends React.Component<IProps> {
  constructor(props: any) {
    super(props);
  }

  readonly state = {
    /** 搜索字符 */
    searchStr: "",
  };
  public componentDidMount() {
    console.log("Searchbar componentDidMount");
  }
  search(searchStr:string){
    console.log('search... ',searchStr);
  }

  render() {
    return (
      <div className="Searchbar-Wrapper">
        <div className="Searchbar-inner">
          <input
            type="text"
            value={this.state.searchStr}
                onChange={({target}) => {
                  this.setState({
                    searchStr: target.value,
                  });
                }}
            autoComplete="off"
            placeholder="请输入搜索内容"
            className="search_input"
          />
          <div className="search_append">
            <div className="Button">
              <img
                src={showpassword}
                className="SVG-password"
                alt="showpassword"
                onClick={() => {
                  this.props.onSearch(this.state.searchStr);
                }}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default (Searchbar);
